import { createStore, applyMiddleware } from 'redux'
// redux-thunk的作用: 帮我们在redux中实现异步
import thunk from 'redux-thunk'
// 使用调用工具的同时使用中间件的包
import { composeWithDevTools } from 'redux-devtools-extension'

// reducer函数执行的时机:
// 1. 创建store时,reducer会触发,这一次是为了初始化数据
// 2. 执行dispatch时,reducer会触发,这一次是为了修改数据
function reducer(state = { count: 1, msg: 'hello' }, action) {
  console.log('reducer函数执行了', state, action)
  switch (action.type) {
    case 'add':
      const newCount = state.count + 1
      return {
        ...state,
        count: newCount,
      }
    case 'sub':
      return {
        ...state,
        count: state.count - 1,
      }
    // 注意: redux中reducer函数必须写default.default的代码是固定的.必须是return state. 因为有了这段代码才能初始化数据
    default:
      return state
  }
}

// 创建store
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))

// store.dispatch({ type: 'add' })

// 注意: 配置好redux-thunk之后,dispatch中可以传入函数了.这个函数其实就是那个真正的中间件
store.dispatch((dispatch) => {
  // 这个dispatch形参接收到是函数.但是如果后面还有中间件,这个函数会触发下一个中间件.如果后面没有中间件了,这个函数会触发reducer

  // 异步操作写在这个函数中
  setTimeout(() => {
    dispatch({ type: 'add' })
  }, 2000)
})

// 监听redux数据变化
store.subscribe(() => {
  console.log(store.getState())
})

store.dispatch({ type: 'add' })
